import React from 'react';
import { Tabs, Form, Input, Button, Table, message } from 'antd';
import type { TabsProps } from 'antd';
import styles from './index.module.less';

const UserCenter: React.FC = () => {
  const [form] = Form.useForm();

  const handleUpdateInfo = (values: any) => {
    console.log('Updated info:', values);
    message.success('信息更新成功');
  };

  const handleUpdatePassword = (values: any) => {
    console.log('Updated password:', values);
    message.success('密码修改成功');
  };

  const items: TabsProps['items'] = [
    {
      key: 'basic',
      label: '基本信息',
      children: (
        <Form
          form={form}
          layout="vertical"
          onFinish={handleUpdateInfo}
          className={styles.form}
        >
          <Form.Item
            label="邮箱"
            name="email"
            rules={[
              { required: true, message: '请输入邮箱' },
              { type: 'email', message: '请输入有效的邮箱地址' }
            ]}
          >
            <Input placeholder="请输入新的邮箱地址" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              更新信息
            </Button>
          </Form.Item>
        </Form>
      ),
    },
    {
      key: 'password',
      label: '修改密码',
      children: (
        <Form
          layout="vertical"
          onFinish={handleUpdatePassword}
          className={styles.form}
        >
          <Form.Item
            label="当前密码"
            name="currentPassword"
            rules={[{ required: true, message: '请输入当前密码' }]}
          >
            <Input.Password placeholder="请输入当前密码" />
          </Form.Item>
          <Form.Item
            label="新密码"
            name="newPassword"
            rules={[{ required: true, message: '请输入新密码' }]}
          >
            <Input.Password placeholder="请输入新密码" />
          </Form.Item>
          <Form.Item
            label="确认新密码"
            name="confirmPassword"
            rules={[
              { required: true, message: '请确认新密码' },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('newPassword') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('两次输入的密码不一致'));
                },
              }),
            ]}
          >
            <Input.Password placeholder="请再次输入新密码" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              修改密码
            </Button>
          </Form.Item>
        </Form>
      ),
    },
    {
      key: 'operations',
      label: '操作记录',
      children: (
        <Table
          columns={[
            { title: '操作类型', dataIndex: 'type' },
            { title: '操作内容', dataIndex: 'content' },
            { title: '操作时间', dataIndex: 'time' },
          ]}
          dataSource={[]} // TODO: 添加实际的操作记录数据
        />
      ),
    },
  ];

  return (
    <div className={styles.userCenter}>
      <Tabs items={items} />
    </div>
  );
};

export default UserCenter; 